<template>
  <div :class="$style.wrap">
    <ContentWrap>
      <FormContainer :columen="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <!-- <el-form-item prop="deptNo" label="组织">
            <el-select v-model="formData.deptNo" placeholder="请选择组织" filterable clearable>
              <el-option v-for="d in deptList" :key="d.deptNo" :value="d.deptNo" :label="d.deptName"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item prop="skillNo" label="技能队列">
            <el-select v-model="formData.skillNo" placeholder="请选择技能队列" clearable filterable>
              <el-option v-for="(g,i) in skillList" :key="i" :value="g.skillNo" :label="g.skillName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="name" label="坐席姓名">
            <el-input v-model.trim="formData.name" placeholder="请输入坐席姓名" clearable>
            </el-input>
          </el-form-item>
          <el-form-item prop="phone" label="转接号码">
            <el-input v-model="formData.phone" placeholder="请输入转接号码" clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <Button enter type="primary" @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="button-container" style="padding-top:0;">
        <AddEdit :skill-list="skillList" @refresh="refresh"></AddEdit>
        <AddEdit title="修改" text="修改" :data="selectedArry" :skill-list="skillList" is-edit @refresh="refresh"></AddEdit>
        <Button type="danger" @click="removeHandle">批量删除</Button>
        <Button type="danger" @click="removeHandle">删除</Button>
      </div>
      <table-box ref="table" :table-config="tableConfig" no-request :other-filters="otherFilters" @selection-change="selectionChange">
        <el-table-column slot="before" type="selection" width="50" />
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import AddEdit from './components/addEdit'
import { deleteCallTransfer, deleteBatchCallTransfer } from '@/api/callTransfer'
// import { getDepartmentInfo } from '@/api/department'
import { filtersRaw, numToString } from '@/utils'
import { getSkillGroup } from '@/api/skillGroup'
export default {
  name: 'TranferPhone',
  components: {
    ContentWrap,
    FormContainer,
    AddEdit
  },
  data() {
    return {
      formData: {
        // deptNo: '',
        skillNo: '',
        name: '',
        phone: ''
      },
      formRules: {},
      tableConfig: {
        interfacePath: '/call-center/api/v1/callTransfer/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'beginTime',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          {
            label: '技能队列',
            formatData: v => this.getSkillName(v)
          },
          {
            prop: 'name',
            label: '坐席姓名'
          },
          {
            prop: 'phone',
            label: '转接号码'
          },
          {
            prop: 'remarks',
            label: '备注'
          },
          {
            prop: 'beginTime',
            label: '转接开始时间'
          },
          {
            prop: 'endTime',
            label: '转接结束时间'
          }
        ]
      },
      otherFilters: [],
      selectedArry: [], // 选中项
      // deptList: [],
      skillList: []
    }
  },
  created() {
    // this.getDeptList()
    this.getSkillGroup()
  },
  methods: {
    queryHandle() {
      this.otherFilters = []
      for (const key of Object.keys(this.formData)) {
        const v = this.formData[key]
        if (v === '') {
          continue
        }
        // if (key === 'deptNo' || key === 'phone') {
        if (key === 'skillNo' || key === 'phone') {
          this.otherFilters.push(filtersRaw(key, v, '='))
          continue
        } else if (key === 'name') {
          this.otherFilters.push(filtersRaw(key, v, 'like'))
        }
      }
      this.refresh()
    },
    // 删除
    removeHandle() {
      if (this.selectedArry.length <= 0) {
        this.$message.error('请选择要删除的数据！')
        return
      }
      this.$msgbox({
        title: '删除',
        message: '确认删除？',
        showCancelButton: true,
        type: 'warning'
      }).then(() => {
        if (this.selectedArry.length === 1) {
          deleteCallTransfer(this.selectedArry[0].id).then(res => {
            this.$message.success('删除成功！')
            this.refresh()
          })
        } else if (this.selectedArry.length > 1) {
          deleteBatchCallTransfer(this.selectedArry.map(e => e.id)).then(res => {
            this.$message.success('批量删除成功！')
            this.refresh()
          })
        }
      })
    },
    selectionChange(v) {
      this.selectedArry = v
    },
    // 刷新
    refresh() {
      this.$nextTick(() => {
        this.$refs.table.initTableData()
      })
    },
    // 获取组织列表
    // getDeptList() {
    //   getDepartmentInfo().then(res => {
    //     this.deptList = res.data
    //   })
    // },
    // 获取技能组
    getSkillGroup() {
      getSkillGroup().then(res => {
        this.skillList = res.data
      })
    },
    // 根据组织编码获取，组织名称
    // getDeptName(v) {
    //   for (const item of this.deptList) {
    //     if (numToString(item.deptNo) === numToString(v.deptNo)) {
    //       return item.deptName
    //     }
    //   }
    //   return ''
    // }
    // 根据组织编码获取，组织名称
    getSkillName(v) {
      for (const item of this.skillList) {
        if (numToString(item.skillNo) === numToString(v.skillNo)) {
          return item.skillName
        }
      }
      return ''
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
  tr{
    background-color: white !important;
  }
}
</style>
